import React, { useState } from 'react';
import { View, Text, Input, Button, Toast } from 'react-vant';
import useUserStore from '@/store/useUserStore';
import { useNavigate } from 'react-router-dom';
import styles from './login.module.css';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { login, loading, error } = useUserStore();
  const navigate = useNavigate();

  const handleLogin = async () => {
    if (!username || !password) {
      Toast('请输入用户名和密码');
      return;
    }

    const success = await login(username, password);
    if (success) {
      Toast('登录成功');
      navigate('/home');
    } else {
      Toast(error || '登录失败，请重试');
    }
  };

  return (
    <View className={styles.loginContainer}>
      <View className={styles.logo}>
        <Text className={styles.title}>电商导购App</Text>
      </View>
      <View className={styles.form}>
        <Input
          value={username}
          onChange={setUsername}
          placeholder="请输入用户名"
          className={styles.input}
        />
        <Input
          value={password}
          onChange={setPassword}
          placeholder="请输入密码"
          type="password"
          className={styles.input}
        />
        <Button
          onClick={handleLogin}
          loading={loading}
          className={styles.loginButton}
        >
          登录
        </Button>
        <View className={styles.tips}>
          <Text>测试账号: admin 密码: 123456</Text>
        </View>
      </View>
    </View>
  );
};

export default Login;